<template>
  <PageLayout title="航线管理">
	  <view
	  	style="display: flex;position: fixed;z-index: 1;bottom: 200px;right: 10px;background-color: rgba(126, 126, 126, 0.3);border-radius: 25px;height: 190px;width: 50px;align-items: center;justify-content: center;border: #c3c3c3 1px solid;flex-direction: column;">
	  	<view style="height: 50px;width: 50px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;" @click="navigateToRouteRecord">
	  		<image src="/static/icons/editor_black.png" mode="aspectFit" style="height: 25px;width: 25px;"></image>
	  	</view>
	  	<view style="height: 50px;width: 50px;display: flex;align-items: center;justify-content: center;"
	  		@click="switchSetting">
	  		<image src="/static/icons/setting_black.png" mode="aspectFit" style="height: 25px;width: 25px;margin-bottom: 20px;"></image>
	  	</view>
		<view style="height: 50px;width: 50px;display: flex;align-items: center;justify-content: center;" v-if="!isInTrash"
			@click="moveToTrash">
			<image src="/static/icons/delect_2_black.png" mode="aspectFit" style="height: 25px;width: 25px;"></image>
		</view>
		<view style="height: 50px;width: 50px;display: flex;align-items: center;justify-content: center;" v-if="isInTrash"
			@click="restoreFromTrash">
			<image src="/static/icons/return_2_black.png" mode="aspectFit" style="height: 25px;width: 25px;"></image>
		</view>
	  </view>
    <view style="width: 100%;padding: 20px;height: 100%;overflow-y: scroll;display: flex;flex-direction: column;">
    	<view v-for="route in activeRoutes" :key="route.routeId" v-if="!isInTrash"
    		style="width: calc(100% - 80px);height: 100px;border-radius: 20px;background-color: #ffffff;margin-bottom: 20px;display: flex;flex-direction: row;align-items: center;color: #393939;padding: 20px;">
    		<image src="/static/icons/deactivate_black.png" mode="aspectFit"
    			style="height: 40px;width: 40px;margin-right: 20px;" v-if="isSetting"
    			@click="toggleActiveStatus(route.routeId,false)"></image>
    		<view style="width: 100%;display: flex;flex-direction: column;text-align: center;">
				<text style="font-size: 20px;margin-bottom: 4px;">
					{{route.routeId}}号路线：{{ route.routeName }}
				</text>
    				<text style="font-size: 16px;">
    					创建时间：{{ formatDateTime(route.createTime) }}
    				</text>
    		</view>
    	</view>
		<view v-for="route in deactiveRoutes" :key="route.routeId" v-if="isInTrash"
			style="width: calc(100% - 80px);height: 100px;border-radius: 20px;background-color: #ffffff;margin-bottom: 20px;display: flex;flex-direction: row;align-items: center;color: #393939;padding: 20px;">
			<image src="/static/icons/active_black.png" mode="aspectFit"
				style="height: 40px;width: 40px;margin-right: 20px;" v-if="isSetting"
				@click="toggleActiveStatus(route.routeId,true)"></image>
			<view style="width: 100%;display: flex;flex-direction: column;text-align: center;">
				<text style="font-size: 20px;margin-bottom: 4px;">
					{{route.routeId}}号路线：{{ route.routeName }}
				</text>
					<text style="font-size: 16px;">
						创建时间：{{ formatDateTime(route.createTime) }}
					</text>
			</view>
		</view>
    	<view style="height: 100%;"></view>
    </view>
  </PageLayout>
</template>

<script setup>
	import PageLayout from "/pages/PageLayout/PageLayout.vue";
	import {
		navigateToControl,
		navigateTodroneAction,
		fetchActiveRouteNameAndIdList,
		fetchDroneIdList,
		navigateToRouteRecord
	} from "/utils/Utils";
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from "vue";
	import{
		 getAllRoutes,
		 toggleActiveStatus,
		 createRoute
	} from "/utils/HttpUtils";
	const isSetting = ref(false);
	//点击切换是否打开设置界面
	const switchSetting = () => {
		isSetting.value = !isSetting.value;
	}
	const isInTrash=ref(false);
	const moveToTrash = () => {
		isInTrash.value=true;
	}
	const restoreFromTrash = () => {
		isInTrash.value=false;
	}
	const routes=ref([]);
	const activeRoutes=ref([]);
	const deactiveRoutes=ref([]);
	const timer = ref(null);
	const formatDateTime = (dateString) => {
		const date = new Date(dateString);
	
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');
	
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};
	onMounted(() => {
		timer.value = setInterval( async () => {
			routes.value=await getAllRoutes();
			activeRoutes.value=routes.value.filter(route => route.isActive);
			deactiveRoutes.value=routes.value.filter(route => !route.isActive);
			// console.log(routes.value);
		}, 1000);
	});
	
	onUnmounted(() => {
		if (timer.value) clearInterval(timer.value);
	});
</script>

<style lang="scss" scoped>

</style>
